@extends('layouts.app')
@section('style')
    @parent
@endsection
@section('content')
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div id="success-info"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <!-- Button trigger modal -->
                    @can('add role')
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addRole">
                            添加角色
                        </button>
                        @else
                        角色列表
                    @endcan
                </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>角色</th>
                            <th>看守器</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="table-body">
                        @if(!empty($role))
                            @forelse($role as $val)
                                <tr data-id="{{$val->id}}">
                                    <td id="id">{{$val->id}}</td>
                                    <td id="name">{{$val->name}}</td>
                                    <td>{{$val->guard_name}}</td>
                                    <td id="description">{{$val->description}}</td>
                                    <td>{{$val->created_at}}</td>
                                    <td>{{$val->updated_at}}</td>
                                    <td>
                                        @can('edit role')
                                            <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#editRole">修改</button>
                                        @endcan
                                        @can('role rightManage')
                                            <button type="button" class="btn btn-info editRight" data-toggle="modal" data-target="#editRight">权限</button>
                                        @endcan
                                        @can('delete role')
                                            <button type="button" class="btn btn-danger delete" onclick="destroy({{$val->id}})">删除</button>
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                null
                            @endforelse
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            {{$role->links()}}
        </div>
    </div>
    <!--addRole Modal -->
    <div class="modal fade" id="addRole" tabindex="-1" role="dialog" aria-labelledby="addRole-title" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addRole-title">添加角色</h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <div id="create-form">
                        <div class="form-group">
                            <label for="name">角色名</label>
                            <input type="text" class="form-control" id="name" placeholder="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="description">描述</label>
                            <input type="text" class="form-control" id="description" placeholder="description" name="description">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!--editRole Modal -->
    <div class="modal fade" id="editRole" tabindex="-1" role="dialog" aria-labelledby="editRole-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editRole-title">修改角色</h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <div id="edit-form">
                        <input type="hidden" class="form-control" id="id" placeholder="id" name="id">
                        <div class="form-group">
                            <label for="name">角色名</label>
                            <input type="text" class="form-control" id="name" placeholder="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="description">描述</label>
                            <input type="text" class="form-control" id="description" placeholder="description" name="description">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="edit">Edit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!--editRight Modal -->
    <div class="modal fade" id="editRight" tabindex="-1" role="dialog" aria-labelledby="editRight-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editRight-title">权限管理</h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <form id="manage-form">
                        <input type="hidden" class="form-control" id="id" placeholder="id" name="id">
                        @foreach($permisson as $v)
                            <label class="checkbox-inline role-label" style="margin: 2px 0;"><input type="checkbox" value="{{$v->id}}"><span class="label label-info">{{$v->description}}</span></label>
                        @endforeach
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="manage">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    @parent
    <script>
        $('button#manage').click(function () {
            let ids=[];
            var id = $("#editRight input[name='id'] ").val();
            $.each($('form#manage-form input:checkbox:checked'),function(){
                ids.push($(this).val())
            });
            $.ajax({
                type:'post',
                url:'role/rightManage',
                data:{ids:ids,id:id},
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'success','权限分配成功');
                    $('#editRight').modal('hide');
                    console.log(data)
                },
                error:function(data){
                    console.log(data.responseJSON.message);
                    mesBox($('#editRight .volidate'),'danger',data.responseJSON.message);
                }
            });

        });
        $('#save').click(function () {
            var name = $("#addRole input[ name='name' ] ").val();
            var description = $("#addRole input[ name='description' ] ").val();
            $.ajax({
                type:'post',
                url:'role',
                cache: false,
                data:{name:name,description:description},
                dataType:'json',
                success:function(data){
                    html='@can("edit role")'+' <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#editRole">修改</button> @endcan'+
                        '@can("role rightManage")'+' <button type="button" class="btn btn-info editRight" data-toggle="modal" data-target="#editRight">权限</button> @endcan'+
                        '@can("delete role")'+' <button type="button" class="btn btn-danger delete" onclick="destroy('+data.role.id+')">删除</button> @endcan';
                    $('.table-body').append('<tr data-id="'+data.role.id+'" class="success">' +
                        '<td id="id">'+data.role.id+'</td>' +
                        '<td id="name">'+data.role.name+'</td>' +
                        '<td>'+data.role.guard_name+'</td>' +
                        '<td id="description">'+data.role.description+'</td>' +
                        '<td>'+data.role.created_at+'</td>' +
                        '<td>'+data.role.updated_at+'</td>' +
                        '<td>' +
                        '@can("edit role")'+' <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#editRole">修改</button> @endcan'+
                        '@can("role rightManage")'+' <button type="button" class="btn btn-info editRight" data-toggle="modal" data-target="#editRight">权限</button> @endcan'+
                        '@can("delete role")'+' <button type="button" class="btn btn-danger delete" onclick="destroy('+data.role.id+')">删除</button> @endcan'+
                        '</td>' +
                        '</tr>');
                    mesBox($('#success-info'),'success','添加成功');
                    $('#addRole').modal('hide');
                },
                error:function(data){
                    var json=JSON.parse(data.responseText);
                    var msg ='';
                    $.each(json.errors, function(idx, obj) {
                        msg+=obj[0]+'</br>';
                    });
                    mesBox($('#addRole .volidate'),'danger',msg);
                }
            })
        });
        $('#edit').click(function () {
            var id = $("#editRole input[ name='id' ] ").val();
            var name = $("#editRole input[ name='name' ] ").val();
            var description = $("#editRole input[ name='description' ] ").val();
            $.ajax({
                type:'put',
                url:'role/'+id,
                data:{name:name,description:description},
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'success','修改成功');
                    $('#editRole').modal('hide');
                    $('tr[data-id='+id+']').children('td#name').text(name);
                    $('tr[data-id='+id+']').children('td#description').text(description);
                    console.log(data)
                },
                error:function(data){
                    var json=JSON.parse(data.responseText);
                    var msg ='';
                    $.each(json.errors, function(idx, obj) {
                        msg+=obj[0]+'</br>';
                    });
                    mesBox($('#editRole .volidate'),'danger',msg);
                    console.log(json.errors)
                }
            })
        });
        function destroy(id) {
            $.ajax({
                type:'delete',
                url:'role/'+id,
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'info','删除成功');
                    $('tr[data-id='+id+']').remove();
                    console.log(data)
                },
                error:function(data){
                    return false
                }
            });
        }
        function mesBox($el,info,mes) {
            $el.html('<div class="alert alert-'+info+' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert"' +'aria-hidden="true">' +
                '                &times;' +
                '            </button>'+mes+'</div>')
        }
        $(function () {
            $('#addRole').on('hidden.bs.modal', function () {
                $("#addRole input[ name='name' ] ").val('');
                $("#addRole input[ name='description' ] ").val('');
            });
            $(document).on('click','button.edit',function () {
                $("#editRole input[ name='id' ] ").val($(this).parent().siblings('td#id').text());
                $("#editRole input[ name='name' ] ").val($(this).parent().siblings('td#name').text());
                $("#editRole input[ name='description' ] ").val($(this).parent().siblings('td#description').text());
            });
            $(document).on('click','button.editRight',function () {
                let id = $(this).parent().siblings('td#id').text();
                $("#editRight input[ name='id' ] ").val(id);
                $.ajax({
                    type:'get',
                    url:'role/'+id+'/edit',
                    cache: false,
                    success:function(data){
                        var ids = [];
                        $.each(data,function (i,n) {
                            ids.push(parseInt(n.permission_id));
                        });
                        $('#manage-form input[type=checkbox]').each(function () {
                            var v = parseInt($(this).val());
                            if(ids.includes(v)){
                                $(this).prop("checked",true);
                            }else {
                                $(this).prop('checked',false);
                            }
                        });
                    },
                    error:function(data){
                        return false
                    }
                });
            });
        });
    </script>
@endsection
